<template>
  <DetailBox :title="getRouteTitle()" :border="2">
    <template #center>
      <slot name="center">
        <ContentBox :border="3" :marginHeight="192">
          <template #center>
            <slot name="center">

              <ZForm ref="newFromRef" :formData="formData" :formRules="constRules" :label-width="120"
                     :form-data="formData" @uData="setData"></ZForm>

            </slot>
          </template>
        </ContentBox>
      </slot>
    </template>
  </DetailBox>

</template>

<script setup lang="ts">
import {ref} from 'vue'
import ZForm from '@/views/components/ZForm/index.vue'
import DetailBox from "@/views/components/DetailBox.vue";
import ContentBox from "@/views/components/ContentBox.vue";
import {getRouteTitle} from "@/utils";

const formData = ref([

  {label: '表格1：', type: 'input', span: 20, valueKey: 'A', placeholder: '密码'},
  {label: '表格1：', type: 'input', span: 4, valueKey: 'A', placeholder: '密码'},
  {
    label: 'xx：', type: 'radio', isRequire: true, span: 6, valueKey: 'B', options: [
      {label: '第一', value: 1},
      {label: '第2', value: 2},
      {label: '第3', value: 3},
    ]
  },
  {
    label: 'xx：', type: 'select', span: 6, valueKey: 'C', options: [
      {label: '第一', value: 1},
      {label: '第2', value: 2},
      {label: '第3', value: 3},
    ]
  }, {
    label: 'xx：', type: 'checkBox', span: 6, valueKey: 'D', options: [
      {label: '第一', value: 1},
      {label: '第2', value: 2},
      {label: '第3', value: 3},
    ]
  }, {
    label: 'xx：', type: 'textarea', span: 12, valueKey: 'E', maxlength: 10
  }, {
    label: 'xx：', type: 'numberInput', span: 6, valueKey: 'F', maxlength: 10
  }, {
    label: 'xx：', type: 'dateTime', span: 6, valueKey: 'G', maxlength: 10
  },

])

const constRules = {

  A: [{required: true, message: '校验信息', trigger: 'blur'}],
  B: [{required: true, message: '校验信息', trigger: 'blur'}],

}

const submitData = ref(null)
const submitValid = ref(false)

const setData = (obj) => {
  let {data, valid} = obj
  submitValid.value = valid
  submitData.value = data
  console.log(submitValid.value, submitData.value)
}

const onSubmit = () => {

  // 接受检验的传参ture通过校验

  // const validate = await proxy.$refs.newFromRef.submitFrom()
  if (submitValid.value) {
    // 可以提交，否则验证不通过
  }

}

</script>
